<template>
  <div>
    <div class="pad-20 bgc-default">
      <div class="pad-20 bg-color-white">
        <div class="flex flex-between height-307">
          <div class="flex info-box">
            <div class="shopkeeper">批发商信息</div>
            <div class="headshop-box">
              <img class="headshop" :src="memberForm.avatar" alt="">
              <div class="align-c" v-if="memberForm.nature === 1">招募员招募</div>
              <div class="align-c" v-if="memberForm.nature === 2">总部招募</div>
            </div>
            <div class="info-bar">
              <h3>基本信息</h3>
              <div class="flex-between width-280">
                <div><label>微客ID：</label><span>{{memberForm.memberId}}</span></div>
                <el-button type="text" @click="doCopy">复制</el-button>
              </div>
              <div><label>微信昵称：</label><span>{{memberForm.nickname}}</span></div>
              <div><label>手机号：</label><span>{{memberForm.phone}}</span></div>
              <div><label>注册时间：</label><span>{{memberForm.passDate}}</span></div>
              <div><label>主播权限：</label><span>{{ memberForm.anchorAuthority === 1 ? '已开启' : '未开启' }}</span></div>
              <div class="flex-between">
                <div>
                  <label>等级：</label>
                  <span
                    v-if="!isGradeChange">{{ wholesalerGradeMap[memberForm.wholesalerGrade] ? wholesalerGradeMap[memberForm.wholesalerGrade] : '' }}</span>
                  <el-select v-if="isGradeChange" v-model="selectedOption" placeholder="请选择等级" @change="gradeClick()">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </div>
                <el-button type="text" v-if="!isGradeChange" @click="doGradeSelect(1)">设置</el-button>
                <el-button type="text" v-if="isGradeChange" @click="doGradeSelect(0)">取消</el-button>
              </div>
              <div class="flex-between">
                <div><label>备注：</label><span>{{memberForm.remarkName}}</span></div>
                <el-button type="text" @click="doOpenRemark">设置</el-button>
              </div>
            </div>
          </div>
          <div class="divider"></div>
          <div class="member-bar info-box">
            <h3>业务信息</h3>
            <div class="flex flex-between width-280">
              <div>
                <label>批发权限：</label>
                <el-switch @change="wholesaleChange" v-model="wholesaleAuthorityFlag" active-color="#13ce66">
                </el-switch>
              </div>
              <el-button type="text" @click="doGetSubUser" v-if="wholesaleAuthorityFlag">账号</el-button>
            </div>
          </div>
          <div class="divider"></div>
          <div class="store-bar info-box">
            <h3>店铺信息</h3>
            <div class="flex flex-between width-280">
              <div><label>店铺名称：</label><span>{{memberForm.storeName}}</span></div>
            </div>
            <div><label>门店地址：</label><span>{{memberForm.storeAddress}}</span></div>
            <div>
              <label>门店照片：</label>
              <span @click="shopPicEls(memberForm.imageList)">
                <img v-for="(item, key) in memberForm.imageList" :key="key" :src="item"
                  style="width: 60px;height: 60px; margin-right: 10px" />
              </span>
            </div>
            <div><label>联系人：</label><span>{{memberForm.storeContact}}</span></div>
            <div><label>联系电话：</label><span>{{memberForm.storePhone}}</span></div>
          </div>
        </div>
      </div>
    </div>

    <div class="margin-container-list">
      <div>
        <el-tabs v-model="activeName">
          <el-tab-pane label="批发订单" name="1"></el-tab-pane>
        </el-tabs>
      </div>
      <div v-if="memberForm.memberId">
        <wholesale-order :memberId="memberForm.memberId"></wholesale-order>
      </div>
    </div>

    <!-- 门店照 -->
    <template v-if="shopPicVisible">
      <div class="shop-pic-swiper" @click="shopPicVisible = false">
        <el-carousel :interval="5000" arrow="always" indicator-position="none" :autoplay="false" height="650px">
          <el-carousel-item v-for="(item, index) in shopPic" :key="index">
            <div>
              <img :src="item" />
            </div>
            <div class="count font-18 font-color font-white">{{ index + 1 }} / {{ shopPic.length }}</div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="shop-pic-swiper-bg" @click="shopPicVisible = false"></div>
    </template>

    <!-- 拒绝通过 -->
    <el-dialog title="备注" :visible.sync="remarkVisible" :close-on-press-escape="true" width="460px">
      <div style="padding:20px;">
        <el-input type="textarea" :rows="6" placeholder="请输入内容" v-model="memberRemark.remarkName"></el-input>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitRemark">确认</el-button>
        <el-button @click="remarkVisible = false">取消</el-button>
      </div>
    </el-dialog>

    <!--设置账号-->
    <el-dialog title="设置账号" :visible.sync="setSubUserVisible" :close-on-press-escape="true" width="550px">
      <el-form :model="subUserForm" label-width="150px" :rules="rules" ref="subUserForm">
        <el-form-item label="昵称" prop="nickname">
          <div>{{subUserForm.nickname}}</div>
        </el-form-item>
        <el-form-item label="操作员姓名" prop="username">
          <div>
            <el-input v-model="subUserForm.username" placeholder="请输入操作员姓名" style="width: 300px"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="登录手机号" prop="phone">
          <div>
            <el-input v-model="subUserForm.phone" type="tel" placeholder="请输入手机号" maxlength="11"
              oninput="this.value=this.value.replace(/^[0,2,3,4,5,6,7,8,9]*$/gi,'')"
              onkeyup="this.value=this.value.replace(/\D/g,'')" style="width: 300px"
              :disabled="subUserForm.subUserId !== ''"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="所属角色" prop="subRoleId">
          <div>
            <el-select v-model="subUserForm.subRoleId" placeholder="请选择">
              <el-option v-for="(item, index) in subRoleList" :index="index" :key="item.subRoleId" :label="item.name"
                :value="item.subRoleId" />
            </el-select>
          </div>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="subUserStatus">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="setSubUserVisible = false">取消</el-button>
        <el-button type="primary" @click="doBindSubUser">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import wholesaleOrder from '../components/wholesale-order'
  import {
    getMember,
    saveMemberRemark,
    doBindSubUser,
    getBindSubUser
  } from '@/api/user/member'
  import {
    getMemberStoreByMemberId
  } from '@/api/user/memberStore'
  import {
    listEnterpeiseRole
  } from '@/api/system/role'
  import clipboard from '@/utils/clipboard'
  import {
    listWholesalerGrade
  } from '@/api/user/memberGrade'
  import {
    updateBatchWholesalerGrade,
    updateBatchStatus
  } from '@/api/user/memberRoleAuthority'

  export default {
    components: {
      wholesaleOrder
    },
    data() {
      return {
        selectedOption: '',
        options: [],
        isGradeChange: false,
        rules: {
          phone: [{
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
          }],
          subRoleId: [{
            required: true,
            message: '请选择角色',
            trigger: 'blur'
          }],
          username: [{
            required: true,
            message: '请输入操作员姓名',
            trigger: 'blur'
          }]
        },
        // 账号对象
        subUserForm: {
          subUserId: '',
          status: '',
          nickname: '',
          username: '',
          memberId: ''
        },
        subUserStatus: 0,
        // 会员对象
        memberForm: {
          memberId: ''
        },
        // 备注对象
        memberRemark: {
          memberRemarkId: '',
          remarkType: 1,
          remarkName: '',
          memberId: '',
          userId: this.getEnterpriseId()
        },
        // tab对象
        activeName: '1',
        // 供应商角色数组
        subRoleList: [],
        // 批发权限flag
        wholesaleAuthorityFlag: false,
        // 备注visible
        remarkVisible: false,
        // 账号设置visible
        setSubUserVisible: false,
        // 图片visible
        shopPicVisible: false,
        // 图片数组
        shopPic: [],
        wholesalerGradeMap: {}
      }
    },
    filters: {},
    // 初始化页面
    created() {
      const queryParams = this.getCurrentPage().query
      if (queryParams && queryParams.memberId) {
        this.memberForm.memberId = queryParams.memberId
        this.initGetMember()
        this.getWholesalerGradeList()
      }
      // 获取供应商企业角色
      listEnterpeiseRole({
        enterpriseId: this.getEnterpriseId(),
        memberFlag: 1
      }).then(response => {
        if (response.isError) return
        this.subRoleList = response.data
      })
    },
    methods: {
      // 点击设置等级
      doGradeSelect(type) {
        if (type === 1) {
          this.isGradeChange = true
        } else {
          this.isGradeChange = false
        }
      },
      gradeClick() {
        const that = this
        if (!that.selectedOption) {
          that.$message.error('设置等级错误')
          return
        }
        var roleAuthorityIds = []
        var memberIds = []
        memberIds.push(that.memberForm.memberId)
        updateBatchWholesalerGrade(that.getEnterpriseId(), roleAuthorityIds, memberIds, that.selectedOption).then(
          response => {
            if (response.isError) return
            that.memberForm.wholesalerGrade = that.selectedOption
            that.isGradeChange = false
            that.$message({
              type: 'success',
              message: '操作成功!'
            })
          })
      },
      // 获取批发商等级集合
      getWholesalerGradeList() {
        const enterpriseId = this.getEnterpriseId()
        listWholesalerGrade(enterpriseId).then(response => {
          if (response.isError) return
          const gradeList = response.data
          var gradeMap = {}
          gradeList.forEach(e => {
            this.options.push({
              'value': e.gradeValue,
              'label': e.gradeName
            })
            gradeMap[e.gradeValue] = e.gradeName
          })
          this.wholesalerGradeMap = gradeMap
        })
      },
      // 初始化
      initGetMember() {
        getMember(this.memberForm.memberId).then(response => {
          if (response.isError) return
          this.memberForm = response.data
          this.selectedOption = this.memberForm.wholesalerGrade
          this.wholesaleAuthorityFlag = response.data.wholesaleAuthority === 1
        })
        getMemberStoreByMemberId({
          memberId: this.memberForm.memberId
        }).then(response => {
          if (response.isError || !response.data) return
          this.memberForm.storeName = response.data.storeName
          this.memberForm.storeAddress = response.data.storeAddress
          this.memberForm.imageList = response.data.imageList
          this.memberForm.storeContact = response.data.storeContact
          this.memberForm.storePhone = response.data.storePhone
        })
      },
      // 跳转订单详情
      showDetail(row) {
        this.$router.push({
          path: '@/views/goods/order/order/detail/index',
          query: {
            orderId: row.orderId,
            memberId: row.memberId,
            shareMemberId: !row.shareMemberId ? '' : row.shareMemberId
          }
        })
      },
      // 复制事件
      doCopy(event) {
        clipboard(this.memberForm.memberId, event)
      },
      // 图片放大事件
      shopPicEls(data) {
        this.shopPicVisible = true
        this.shopPic = data
      },
      // 打开备注dialog事件
      doOpenRemark() {
        this.memberRemark.memberRemarkId = this.memberForm.memberRemarkId
        this.memberRemark.memberId = this.memberForm.memberId
        this.memberRemark.remarkName = this.memberForm.remarkName
        this.memberRemark.remarkType = this.memberForm.remarkType
        this.memberRemark.userId = this.getEnterpriseId()
        this.remarkVisible = true
      },
      // 备注确定事件
      submitRemark() {
        saveMemberRemark(this.memberRemark).then(response => {
          if (response.isError) return
          this.$message({
            message: '保存成功',
            type: 'success'
          })
          this.remarkVisible = false
          this.initGetMember()
        })
      },
      // 获取账户信息
      doGetSubUser() {
        getBindSubUser(this.memberForm.memberId).then(response => {
          if (response.isError) return
          this.subUserForm = response.data
          this.subUserStatus = this.subUserForm.status ? 1 : 0
          this.subUserForm.nickname = this.memberForm.nickname
          this.setSubUserVisible = true
        })
      },
      // 设置账户
      doBindSubUser() {
        this.$refs['subUserForm'].validate((valid) => {
          if (valid) {
            this.subUserForm.enterpriseId = this.getEnterpriseId()
            this.subUserForm.memberId = this.memberForm.memberId
            this.subUserForm.status = this.subUserStatus
            doBindSubUser(this.subUserForm).then(response => {
              if (response.isError) return
              this.$message({
                type: 'success',
                message: '成功!'
              })
              this.setSubUserVisible = false
            })
          }
        })
      },
      // 批发权限开关事件
      wholesaleChange() {
        const rejectReason = this.wholesaleAuthorityFlag ? '开启批发商权限' : '关闭批发商权限'
        const memberIds = []
        memberIds.push(this.memberForm.memberId)
        const authorityStatus = this.wholesaleAuthorityFlag ? 1 : 0
        updateBatchStatus(this.getEnterpriseId(), 1, null, memberIds, authorityStatus, null,
          rejectReason).then(response => {
          if (response.isError) {
            return
          }
          if (this.wholesaleAuthorityFlag) {
            this.$message({
              type: 'success',
              message: '批发权限已开启!'
            })
          } else {
            this.$message.error('批发权限已关闭')
          }
        })
      }
    }
  }
</script>


<style lang="less" scoped>
  .shopkeeper {
    height: 307px;
    width: 40px;
    background-color: #409eff;
    color: white;
    word-wrap: break-word;
    /*英文的时候需要加上这句，自动换行*/
    /*自测了这句话没啥用*/
    writing-mode: vertical-rl;
    /*从左向右 从右向左是 writing-mode: vertical-rl;*/
    writing-mode: tb-rl;
    /*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
    text-align: center;
    padding: 0px;
    display: flex;
    -webkit-display: flex;
    flex-direction: column;
    /* align-content: center; */
    /* vertical-align: middle; */
    justify-content: center;
    letter-spacing: 8px;
  }

  .divider {
    width: 1px;
    height: 240px;
    background-color: #f4f4f4;
  }

  .member-bar {
    height: 210px;
    line-height: 26px;
  }

  .store-bar {
    width: 500px;
    height: 210px;
    line-height: 26px;
  }

  .info-box {
    .headshop-box {
      padding: 30px 37px 0 70px;

      .headshop {
        width: 92px;
        height: 92px;
        border-radius: 50%;
      }
    }

    .info-bar {
      line-height: 26px;
      margin-top: 50px;
    }

    h3 {
      margin-top: 0;
    }

    label {
      color: #999999;
      width: 70px;
      display: inline-block;
      text-align: right;
    }

    .el-button {
      padding: 0;
    }
  }

  .shop-pic-swiper-bg {
    position: fixed;
    left: 0px;
    top: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
  }

  .shop-pic-swiper {
    position: fixed;
    left: 0px;
    top: 50%;
    z-index: 1001;
    width: 100%;
    height: 100%;
    margin-top: -325px;
    padding-left: 180px;
    box-sizing: border-box;

    /deep/ .el-carousel {
      .el-carousel__arrow {
        background-color: transparent;
        font-size: 26px;
        border: #fff 2px solid;

        i {
          font-weight: 500;
        }
      }

      .el-carousel__item {
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 35px;

        img {
          max-height: 615px;
        }

        .count {
          position: fixed;
          left: 50%;
          bottom: 0px;
          margin-left: -20px;
          z-index: 101;
        }
      }
    }
  }
</style>
